<template>
    <section style="height: 100%;background: #fff;">
      <header></header>
      <div style="box-shadow: 0px 5px 10px rgba(194,194,194,.2);">
        <yd-cell-item>
          <span slot="left">银行卡号</span>
          <yd-input max="29" slot="right" v-model="input1" ref="input1" required :show-required-icon="false" :show-success-icon="false" :show-error-icon="false" regex="bankcard"  placeholder="请输入银行卡号" style="margin-left: 0.1rem;
"></yd-input>
        </yd-cell-item>
      </div>
      <div  class="footer_pos">
        <div class="foot_left">
          <span>需付金额：</span><span style="color: red;font-weight: bold; ">￥{{price}}</span>
        </div>
        <div class="foot_right" @click="show2()">
          立即验证
        </div>
      </div>
      <payPart :show-wrap="iswrap" :need-param="param" :product-title="title" :product-price="price" :api-logo="apilogo"></payPart>
    </section>
</template>
<script>
    import payPart from '@/components/api/pay_part';
    export default {
        name: "bankOne",
        data(){
          return{
            input1:'',
            iswrap:false,
            price:'',
            param:{},
            title:'银行卡一要素查询',
            apilogo:'',
          }
        },
      methods:{
        show2(){
          const that = this;
          const input1 = this.$refs.input1;
          if(input1.valid == false){
              this.$dialog.notify({
                mes: '请完善银行卡号',
                timeout: 1500,
              });
            return;
          }
          let redirectUrl = this.$route.path;
          this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
            .then((response)=> {
              if (response.data.code != 200) {
                this.$dialog.notify({
                  mes: '您还未登录，将为您跳转到登录页面',
                  timeout: 3000,
                  callback: () => {
                    let obj = {};
                    obj.bankid = that.input1;
                    obj.url = redirectUrl;
                    sessionStorage.setItem('redirectUrl',JSON.stringify(obj));
                    that.$router.push('/login');
                  }
                });
              } else {
                that.param.bankid = that.input1;
                that.param.pid = '21';
                that.iswrap = !that.iswrap;
              }
            }).catch(()=>{
          })

        }
      },
      components:{
        payPart
      },
      created(){
        let that = this;
        let redirectUrl = JSON.parse(sessionStorage.getItem('redirectUrl'));
        if(redirectUrl != null){
          this.input1 = redirectUrl.bankid;
          sessionStorage.removeItem('redirectUrl');
        }
        this.$ajax.post(window.g.apiUrl+'/alipay/getProduct.do',JSON.stringify({
          type:'B',
        })).then((response)=>{
          if(response.data.code == 200){
            let arr = response.data.data;
            for(var i = 0;i<arr.length;i++){
              if(arr[i].id == '21'){
                that.price = arr[i].price;
                that.apilogo = arr[i].iconurl;
              }
            }
            // that.pid = response.data.data[1].id;
            //
          }else{
            that.$dialog.notify({
              mes: '信息获取超时，请稍后重试',
              timeout: 1500,
            });
          }


        }).catch(()=>{
        })
      },
      beforeRouteEnter(to,from,next){
        if(from.path != '/loginback'){
          sessionStorage.removeItem('redirectUrl');
        }
        next();
      }
    }
</script>

<style scoped>
  header{
    width: 100%;
    height: 1.9rem;
    background-image: url("../../assets/api/bank_bg.png");
    background-size: 100% 100%;
  }
  .footer_pos{
    width: 100%;
    height: 1rem;
    background: #F5F5F5;
    position: fixed;
    bottom: 0;
    display: flex;
  }
  .foot_left{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
  }
  .foot_right{
    width: 2.5rem;
    height: 1rem;
    background: #E72A26;
    color: #fff;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
